<template>
  <div class="search-suggestion">
    <van-cell
      v-for="(v, i) of displayList"
      :key="v"
      icon="search"
      @click="$emit('click-kw', list[i])"
    >
      <template #title>
        <span v-html="v"></span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'SearchSuggestion',
  props: {
    kw: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      list: [
        // '黑马程序员1helLo',
        // '黑马程序员2HelloWorld',
        // '黑马程序员3HeLLo',
        // '黑马程序员4hehello',
        // '黑马程序员5heHeHellOOOoo',
      ],
    }
  },
  computed: {
    displayList() {
      return this.list.map(v => {
        // 关键字高亮最佳解决方案：
        // var kw = 'hello'
        // var kwReg = new RegExp('('+ kw + ')', 'gi')
        // var str = '黑马程序员HeLlOWorld'
        // str.replace(kwReg, '<span style="color: red;">$1</span>')
        // ---------------------------------------------------------

        // 创建一个正则表达式有两种方式：
        // 1. /xxx/ -- 字面量
        // 2 new RegExp(text, modifier) -- new 实例
        //   -- 第一个参数 text，String 类型，表示正则表达式原文
        //   -- 第二个参数 modifier，String 类型，表示正则表达式的修饰符
        // 这里只能用 new 的方式，因为表达式的原文在变量中，在外面加两个小括号的意思是：分组
        const kwReg = new RegExp('(' + this.kw + ')', 'gi')
        // 在替换的时候，可以通过 $分组号 反向引用原文中匹配的内容，分组号从 1 开始
        const newV = v.replace(kwReg, '<span style="color: red;">$1</span>')
        // 将替换完后的字符串返回出去，作为 map 函数返回的新数组的元素
        return newV
      })
    },
  },
  watch: {
    // 监听到属性 kw 发生变化时，就要发请求获取联想建议
    // 这样简写有个问题，因为第一次渲染时，不会触发该侦听器函数
    // async kw() {
    //   const res = await this._apis.search.getSuggestionList(this.kw)
    //   console.log(res, 'res')
    // },
    kw: {
      immediate: true, // 立即触发
      handler: _.debounce(async function () {
        const res = await this._apis.search.getSuggestionList(this.kw)
        // 我们发现有时候，这个后台接口在考验我们，给我们一个 [null] 这样的 options，所以我们需要自己处理一下这个数据，就加了一个 .filter(v => !!v) 过滤出合法数据
        this.list = res.data.data.options.filter(v => !!v)
      }, 300),
    },
  },
}
</script>

<style scoped lang="less"></style>
